<template>
  <!-- 传入的参数 -->
  <div v-theme:column="'narrow'" id="show-blogs">
    <h1>博客总览</h1>
    <input type="text" v-model="search" placeholder="搜索">
    
    <!-- <div v-for="blog in filteredBlogs" :key="blog" class="single-blog"> 
      <router-link v-bind:to="'/blog/' + blog.id">
        <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
      </router-link>
      <article>
        {{blog.content | snippet}}
      </article>
    </div> -->
    <!-- 由于没有设置后端接口,无法获取到后台数据
    因此在此只表现出一个文本演示 -->
    <div class="single-blog">
      <router-link>
        <h2>预设标题</h2>
      </router-link>
      <article>
        预设文本
      </article>
    </div>
  </div>
</template>
 
<script>
 
export default {
  name: 'show-blogs',
  data(){
    return {
      blogs:[],
      search:""
    }
  },
  //或者是 ./../static/post.json 注:资源文件只能放在static目录下
  created(){
    this.$http.get('https://......awfuoz.wilddogio.com/posts.json')
    .then(function(data){
       return data.json()//Response 
     }).then(function(data){ 
        var blogsArray = [];//将对象放到数组里面去
        for(let key in data){
          console.log(data);
          console.log(data[key]);
          data[key].id = key;
          blogsArray.push(data[key]);
        }
        this.blogs = blogsArray;
      })
   },
   //
   computed:{
    filteredBlogs:function(){
      return this.blogs.filter((blog) =>{
        //blog每一篇文章
        return blog.title.match(this.search)
      })
    }
  },
  //过滤器
  filters:{
    "to-uppercase":function(value){
     return value.toUpperCase();
   },
   "snippet":function(value){
    return value.slice(0,100) + "...";
  }
},
//自定义指令
directives:{
 'rainbow':{
   bind(el,binding,vnode){
     el.style.color = "#" + Math.random().toString(16).slice(2,8);
   }
 },
 'theme':{
  bind(el,binding,vnode){
    if(binding.value =="wide"){
      el.style.maxWidth = "1260px";
    }
    else if (binding.value == 'narrow') {
      el.style.maxWidth = "560px";
    }
    if (binding.arg == 'column') {
      el.style.background = "#6677cc";
      el.style.padding = '20px';
    } 
  }
}
}
}
</script>
 
<style>
#show-blogs{
  max-width: 800px;
  margin: 0 auto;
}
 
.single-blog{
  height: 160px;
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background: #eee;
  border: 1px dotted #aaa;
  color: aqua;
  font-size: 22px;
}
 
#show-blogs a{
  color: #444;
  text-decoration: none;
}
 
input[type="text"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
 
</style>
